<template>
    <div class="innovate"> 
        <!-- 头部 -->
        <InsideHeader :bannerType="bannerType"></InsideHeader>
       
        <!-- 面包屑 -->
        <!-- <crumb></crumb> -->
        <div class="crumb">
          <div class="block">  
              <div class="crumbL">
                  <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                  <em>></em>
                  <nuxt-link :to="{name: 'innovate'}" class="on">创新产品</nuxt-link>
                  <div class="clear"></div>
              </div>
              <div class="clear"></div>
          </div>
      </div>

        <div class="block">
            <div class="innovateS">
                <!-- Ctit -->
                <div class="Ctit">
                    <p>创新产品</p>
                </div>
                  <ul>
                    <li v-for="(item,index) in prolistdata" :key="index">
                      <a>
                        <img :src="uploadurl+item.mainPhoto" :alt="item.productName"/>
                        <p class="headSnavLST1T">{{item.productName}}</p>
                        <div class="headSnavLST1E">
                          <a :href="itemb.url" v-for="(itemb,index) in item.productTypeVos" :key="index" class="secondmenu" target="_blank">{{itemb.productName}}</a>
                        </div>
                      </a>
                    </li>
                    <div class="clear"></div>
                  </ul>
            </div>
        </div>

        <!-- 链接 -->
        <Insidelink></Insidelink>

        <!-- 底部 -->
        <HomeHooter></HomeHooter>
    </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link";

export default {
  name: "innovate",
  data() {
    return {
        bannerType:'innovate',
        prolistdata:[]
    };
  },
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink,
  },
  methods: {
    //产品菜单
    prolist(){
      let id = this.$axios,
      params = {
      };
      this.$api.homeindex.promenudata(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.prolistdata=result.data
        }
      });
    }
  },
  mounted () {
      this.uploadurl=this.comsys.uploadurl()
      this.prolist()
  }  
  
};
</script>

<style scoped>
    .innovate{
        width: 100%;
        height: auto;
    }
    .innovateS{
        width: 100%;
        height: auto;
        margin-top: 45px;
        overflow: hidden;
    }
    .innovateS ul{
        width: 110%;
        height: auto;
        margin-top: 20px;
    }
    .innovateS ul li{
        width: 21.59%;
        height: auto;
        min-height: 200px;
        float: left;
        background: url(../../static/images/innovateS.png) no-repeat left top;
        background-size: 100% auto;
        margin-right: 1.5%;
        margin-top: 1.5%;
        box-sizing: border-box;
        padding: 5px 0px 0px 5px;
    }
    .innovateS ul li a{
        display: block;
        width: 100%;
        height: auto;
        border-top: 2px solid #ed3745;
    }
    .innovateS ul li a .innovateST{
        width: 100%;
        height: auto;
        padding:0px 15px;
        box-sizing: border-box;
        border-bottom: 1px dashed #dbdbdb;
    }
    .innovateS ul li a .innovateST p{
        font-size: 18px;
        color:#333;
        line-height: 45px;
        background: url(../../static/images/Hprod1.jpg) no-repeat left center;
        background-size:9px 9px;
        padding-left: 15px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .innovateS ul li a img{
        display: block;
        width: 100%;
        height: auto;
        margin-top: 5px;
    }
    .innovateS ul li a .innovateSC{
        width: 100%;
        height: auto;
        padding: 10px 0px;
        border-bottom: 1px dashed #dbdbdb;
    }
    .innovateS ul li a .innovateSC p{
        width: 100%;
        height: 47px;
        font-size: 14px;
        color: #333;
        line-height: 23px;
        overflow: hidden;
    }
    .innovateS ul li a .innovateSE{
        width: 100%;
        height: 130px;
        margin-top: 10px;
        overflow: hidden;
    }
    .innovateS ul li a .innovateSE p{
        font-size: 14px;
        color: #333;
        line-height: 26px;
        background: url(../../static/images/HdataCLS2.png) no-repeat left center;
        background-size:6px 6px;
        padding-left: 15px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .innovateS ul li a .innovateSE p:hover{
        color: #e70012;
    }


    /* 媒体查询 */
    /** max-width:1024px **/
    @media only screen and (max-width: 1023px){
        .innovateS{
            margin-top: 40px;
        }
        
    }

    /** max-width:750px **/
    @media only screen and (max-width: 749px){
        .innovateS ul li{
            width: 44.3%;
            margin-right: 2.3%;
            margin-top: 2.3%;
        }
        
    }
</style>